<template>
<div>
    <!-- 轮播 -->
    <div class="banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                <li data-target="#carousel-example-generic" data-slide-to="5"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <!-- pc -->
                    <a href="#" class='banner_a image_a hidden-xs  hidden-md hidden-sm'></a>
                    <!-- 下面的是 小窗口 -->
                    <a href="#" class='mobile_a hidden-lg'>
                        <img src="../../assets/hghotel_image/banner06.jpg" alt="...">
                    </a>
                </div>
                <div class="item">
                    <a href="#" class='banner_a image_b hidden-xs  hidden-md hidden-sm'></a>
                    <!-- 下面的是 小窗口 -->
                    <a href="#" class='mobile_a hidden-lg'>
                        <img src="../../assets/hghotel_image/banner01.jpg" alt="...">
                    </a>
                </div>
                <div class="item">
                    <a href="#" class='banner_a image_c hidden-xs  hidden-md hidden-sm'></a>
                    <!-- 下面的是 小窗口 -->
                    <a href="#" class='mobile_a hidden-lg'>
                        <img src="../../assets/hghotel_image/banner02.jpg" alt="...">
                    </a>
                </div>
                <div class="item">
                    <a href="#" class='banner_a image_d hidden-xs  hidden-md hidden-sm'></a>
                    <!-- 下面的是 小窗口 -->
                    <a href="#" class='mobile_a hidden-lg'>
                        <img src="../../assets/hghotel_image/banner03.jpg" alt="...">
                    </a>
                </div>
                <div class="item">
                    <a href="#" class='banner_a image_e hidden-xs  hidden-md hidden-sm'></a>
                    <!-- 下面的是 小窗口 -->
                    <a href="#" class='mobile_a hidden-lg'>
                        <img src="../../assets/hghotel_image/banner04.jpg" alt="...">
                    </a>
                </div>
                <div class="item">
                    <a href="#" class='banner_a image_f hidden-xs  hidden-md hidden-sm'></a>
                    <!-- 下面的是 小窗口 -->
                    <a href="#" class='mobile_a hidden-lg'>
                        <img src="../../assets/hghotel_image/banner05.jpg" alt="...">
                    </a>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="container-fluid">
        <!-- <div class="row yd_wrap">
            <div class="col-lg-2 no_pad hidden-xs hidden-sm hidden-md">
                <div class="ksyd">
                    <div class="ks_title">
                        快速预定
                    </div>
                    <div class="yd_img">
                        <img style="width:108px;height:108px;border-radius:200px;margin:40px auto" src="../../assets/hghotel_image/kffw3.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="col-lg-10 col-md-12 col-md-12 col-md-12 form_wrap" style="background:#bc8ebc;padding:15px">
                <form>
                    <div class="row">
                        <div class="col-sm-6 col-xs-12 form_top">
                            <div class="form-group form_st">
                                <label>您的姓名:*</label>
                                <input type="text" class="form-control" id="" placeholder="">
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12 form_top">
                            <div class="form-group form_st">
                                <label>联系电话:*</label>
                                <input type="text" class="form-control" id="" placeholder="">
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12 form_top">
                            <div class="form-group form_st">
                                <label>入住时间:*</label>
                                <date-picker :date="startTime" :option="option"></date-picker>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12 form_top">
                            <div class="form-group form_st">
                                <label>退房时间:*</label>
                                <date-picker :date="endTime" :option="option"></date-picker>
                            </div>
                        </div>
                        <div class="col-xs-6 col-xs-offset-3 btn_top">
                            <button type="submit" class="btn btn-default btn-block" style="background:#8f4290;border:0;color:#fff">预&nbsp;&nbsp;定</button>
                        </div>
                    </div>

                </form>
            </div>
            
        </div> -->
        
        <div class="kffw hidden-xs" >
            <span class="kffw_left"></span> 客房服务 <span class="kffw_right"></span>
        </div>
        <div class="row  hidden-sm hidden-md hidden-lg" style="font-size:16px;margin-top:20px;line-height:20px;text-align:center;padding:0 10px;margin-bottom: 20px;">
            <div class="col-xs-4 kffw_left"></div >
            <div class="col-xs-4 no_pad" style="font-weight:bold;font-size:18px">客房服务</div >
            <div class="col-xs-4 kffw_right"></div>
        </div>
        <!-- -->
        <div class="row">
            <!--left-->
            <div class="col-md-6 col-xs-12 no_pad">
                <div class="col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad title_wl">
                        <img src="../../assets/kffw_img/gray.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            豪华海景商务标间
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>位于酒店11层-13层</p>
                            <p>让宾客尽情俯览迷人海景</p>
                            <p>房间面积29㎡  南向海景</p>
                            <p>设有大床、双床</p>
                        </div>
                    </div>
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/hhhjswbj.png" width=100% alt="">
                    </div>
                </div>
                <div class="col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/hhhjswtj.png" width=100% alt="">
                    </div>
                    <div class="col-xs-6 no_pad title_wr">
                        <img src="../../assets/kffw_img/purple.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            豪华海景商务套间
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>房间装饰时尚典雅</p>
                            <p>宽敞舒适</p>
                            <p>房间面积45㎡</p>
                            <p>在11层-12层</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad title_wl">
                        <img src="../../assets/kffw_img/gray.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            豪华市景商务标间
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>装饰时尚典雅</p>
                            <p>房间面积21㎡</p>
                            <p>北向都市风景</p>
                            <p>位于酒店11层-12层</p>                        
                        </div>
                    </div>
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/hhsjswbj.png" width=100% alt="">
                    </div>
                </div>
                <div class="col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/sjf.png" width=100% alt="">
                    </div>
                    <div class="col-xs-6 no_pad title_wr">
                        <img src="../../assets/kffw_img/purple.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            市景房
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>房间温馨舒适</p>
                            <p>房间面积29㎡</p>
                            <p>北向都市风景</p>
                            <p>在4层-10层</p>
                        </div>
                    </div>
                </div>
                <div class="hidden-md hidden-lg col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad title_wl">
                        <img src="../../assets/kffw_img/gray.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            总统套房
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>房间尊贵典雅</p>
                            <p>凭窗俯瞰迷人海景</p>
                            <p>房间面积112㎡</p>
                            <p>打造宾至如归的入住体验</p>
                        </div>
                    </div>
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/zttf.png" width=100% alt="">
                    </div>
                </div>
            </div>
            <!--right-->
            <div class="col-md-6 col-xs-12 no_pad">
                <div class="col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/hjswbj.png" width=100% alt="">
                    </div>
                    <div class="col-xs-6 no_pad title_wr">
                        <img src="../../assets/kffw_img/purple.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            海景商务标间
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>房间宽敞舒适</p>
                            <p>让宾客尽情俯览迷人海景</p>
                            <p>房间面积29㎡  南向海景</p>
                            <p>在4层-10层</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad title_wl">
                        <img src="../../assets/kffw_img/gray.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            豪华行政商务套房
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>房间宽敞舒适</p>
                            <p>让宾客尽情俯览迷人海景</p>
                            <p>房间面积57㎡  南向海景</p>
                            <p>在8层-9层</p>
                        </div>
                    </div>
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/hhxzswtf.png" width=100% alt="">
                    </div>
                </div>
                <div class="col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/srtf.png" width=100% alt="">
                    </div>
                    <div class="col-xs-6 no_pad title_wr">
                        <img src="../../assets/kffw_img/purple.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            三人套间
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>房间设计时尚典雅</p>
                            <p>房间面积31㎡</p>
                            <p>北向都市风景</p>
                            <p>在11层-12层</p>
                        </div>
                    </div>
                </div>
                <div class="hidden-xs hidden-sm col-xs-12 no_pad">
                    <div class="col-xs-6 no_pad title_wl">
                        <img src="../../assets/kffw_img/gray.png" width=100% alt="" class="hidden-lg">
                        <div class="kfmc">
                            总统套房
                        </div>
                        <div class="kfjs hidden-xs hidden-sm hidden-md">
                            <p>房间尊贵典雅</p>
                            <p>凭窗俯瞰迷人海景</p>
                            <p>房间面积112㎡</p>
                            <p>打造宾至如归的入住体验</p>
                        </div>
                    </div>
                    <div class="col-xs-6 no_pad">
                        <img src="../../assets/kffw_img/zttf.png" width=100% alt="">
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- 电脑端宾馆简介-->
    <div class="hidden-xs hidden-sm hidden-md" style="width:100%;height:502px;background-color:#f5f5f5;margin-top:60px;padding:40px 0;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6 no_pad">
                    <img src="../../assets/kffw_img/bgjj.png" width=100% alt="">
                </div> 
                <div class="col-xs-6 no_pad" style="background:#fff;height:422px;">
                    <div><span class="brief">宾馆简介</span></div>
                    <div class="brief_content">
                        <p>青岛惠国宾馆是一家集住宿、餐饮、商务、会议、休闲、旅游为一体的三星级海景酒店，于2013年7月最新全面装修后重新营业，
                        精装风格独具欧式浪漫典雅，服务配套人性科技智能，崭新闪亮在滨海黄金旅游线的西部起点上。</p>
                        <p>惠国宾馆地理位置优越。不仅集中地处青岛火车站、青岛地标性建筑——栈桥、青岛旅游码头、青岛中山路百年欧陆风情老街和中国最长海底隧道——胶州湾海底隧道身旁，
                        而且坐拥110余间全落地窗各式海景客（套）房，350余席位的名厨、特色食材料理的养生家常美食以及青岛一流的学术报告厅、电教室和门类齐全的培训教室及其师资力量等。
                        交通便利、景色优美、海风拂面、绿意静好，是您远离尘嚣、商务休闲、静涤心灵的绝佳选择。</p>
                        <p>阳光日新，惠风和畅，温暖常在。惠国宾馆诚挚欢迎您的光临。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--手机端宾馆简介-->
    <div class="container-fluid hidden-lg">
        <div class="kffw hidden-xs">
            <span class="kffw_left"></span> 宾馆简介 <span class="kffw_right"></span>
        </div>
        <div class="row  hidden-sm hidden-md hidden-lg" style="font-size:16px;margin-top:20px;line-height:20px;text-align:center;padding:0 10px;margin-bottom: 20px;">
            <div class="col-xs-4 kffw_left"></div >
            <div class="col-xs-4 no_pad" style="font-weight:bold;font-size:18px">宾馆简介</div >
            <div class="col-xs-4 kffw_right"></div>
        </div>
        <div class="brief_content">
            <p>青岛惠国宾馆是一家集住宿、餐饮、商务、会议、休闲、旅游为一体的三星级海景酒店，于2013年7月最新全面装修后重新营业，
            精装风格独具欧式浪漫典雅，服务配套人性科技智能，崭新闪亮在滨海黄金旅游线的西部起点上。</p>
            <p>惠国宾馆地理位置优越。不仅集中地处青岛火车站、青岛地标性建筑——栈桥、青岛旅游码头、青岛中山路百年欧陆风情老街和中国最长海底隧道——胶州湾海底隧道身旁，
            而且坐拥110余间全落地窗各式海景客（套）房，350余席位的名厨、特色食材料理的养生家常美食以及青岛一流的学术报告厅、电教室和门类齐全的培训教室及其师资力量等。
            交通便利、景色优美、海风拂面、绿意静好，是您远离尘嚣、商务休闲、静涤心灵的绝佳选择。阳光日新，惠风和畅，温暖常在。惠国宾馆诚挚欢迎您的光临。</p>
        </div>
    </div>

    <div class="container-fluid">
        <div class="kffw hidden-xs">
            <span class="kffw_left"></span> 服务项目 <span class="kffw_right"></span>
        </div>
        <div class="row hidden-sm hidden-md hidden-lg " style="font-size:16px;margin-top:20px;line-height:20px;text-align:center;padding:0 10px;margin-bottom: 20px;">
            <div class="col-xs-4 kffw_left"></div >
            <div class="col-xs-4 no_pad" style="font-weight:bold;font-size:18px">服务项目</div >
            <div class="col-xs-4 kffw_right"></div>
        </div>
        <div style="font-size:14px">
            <p>青岛惠国宾馆设有直拨电话、电子邮件与上网服务、复印服务、擦鞋服务、邮件快递服务、免费Wi-Fi、叫车服务、</p>
            <p>传真服务、无线数据连接、打印服务、延后退房、保险箱、送餐服务、洗车服务、商务中心、夜床服务、旅游服务。</p>
        </div>
    </div>
</div>
</template>
<script>
import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue'
export default {
    components: {
        'date-picker': myDatepicker,
    },
    data(){
      return{
        startTime: {
            time: ''
        },
        endTime: {
            time: ''
        },
        option: {
            type: 'day',
            week: ['一', '二', '三', '四', '五', '六', '日'],
            month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            format: 'YYYY-MM-DD',
            inputStyle: {
                'border': '0',
                'width': '100%',
                'display': 'block',
                'width': '100%',
                'height': '34px',
                'padding': '6px 12px',
                'font-size': '14px',
                'line-height': '1.42857143',
                'color': '#555',
                'background-color': '#fff',
                'background-image': 'none',
                'border': '1px solid #ccc',
                'border-radius': '4px',
                '-webkit-box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
                'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
                '-webkit-transition': 'border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
                'transition': 'border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
                'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
                'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
            },
            color: {
            header: 'rgb(188, 142, 188)',
            headerText: '#fff'
            },
            buttons: {
            ok: '确定',
            cancel: '取消'
            },
            overlayOpacity: 0.5, // 0.5 as default
            dismissible: true // as true as default
        },
      } 
    },
    mounted(){
        $('#carousel-example-generic').carousel({
           interval: 3000
          });
        this.swipe();
    },
    computed: {
        
    },
  methods:{
    swipe(){
      // 获取手指在轮播图元素上的一个滑动方向（左右）
      // 获取界面上轮播图容器
      var $carousels = $('#carousel-example-generic');
      var startX,endX,moveX;
      // 在滑动的一定范围内，才切换图片
      var offset = 30;
      // 获取index
      // var index =0;
      // $carousels.on('slide.bs.carousel', function (event) {
      //   var $hoder = $(this).find('.item'),
      //     $items = $(event.relatedTarget);
      //   //getIndex就是轮播到当前位置的索引
      //   var getIndex= $hoder.index($items);
      //   index = getIndex;
      // })
      // 注册滑动事件
      $carousels.on('touchstart',function (e) {
          // 手指触摸开始时记录一下手指所在的坐标x
          startX = e.originalEvent.touches[0].clientX;
          // 暂停自动轮播
      })
      $carousels.on('touchmove',function (e) {
          // 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值
          endX = e.originalEvent.touches[0].clientX;
          moveX = startX - endX;
      });
      $carousels.on('touchend',function (e) {
          //console.log(endX);
          //结束触摸一瞬间记录手指最后所在坐标x的位置 endX
          //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
          var distance = Math.abs(startX - endX);
          if (distance > offset){
              //说明有方向的变化
              //根据获得的方向 判断是上一张还是下一张出现
              $(this).carousel(startX >endX ? 'next':'prev');
          }
      })
      }
  }
}
</script>

<style scoped>
/*屏幕尺寸大于1200时样式*/
 @media (min-width:1200px) {
     .container-fluid {
        margin-right: auto;
        margin-left: auto;
        padding: 0;
        width: 1200px;
    }
    .row {
        margin: 0;
    }
    .yd_wrap {
        height: 300px;
        margin-top: 50px;
    }
    
    .no_pad {
        padding: 0;
    }
    .ksyd{
        width:100%;
        background:#f8f8f8;
        height: 100%;
    }
    .form_wrap {
        height: 100%;
    }
    .ksyd:after{
        content:'';
        width:0; 
        height:0; 
        border-top:10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #f8f8f8;
        z-index: 100;
        position:absolute;
        right:-10px;
        top:45%;
    }
    .ks_title{
        margin:0 auto;
        margin-top:60px;
        padding: 10px 16px;
        font-size:20px;
        border:2px solid #cdcdcd;
        border-left:0px;
        border-right:0px;
        font-weight: bolder;
        display: inline-block;
    }
    .form_top{
        margin-top:22px;
    }

    .title_wl{
        position: relative;
        background-color: #f8f8f8;
    }
    .title_wr{
        background-color: #8f4290;
        position: relative;
    }
    .title_wl :after{
        content:'';
        width:0; 
        height:0; 
        border-top:10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 8px solid #f8f8f8;
        z-index: 100;
        position:absolute;
        right:-8px;
        top:50%;
    }
    .title_wr :before{
        content:'';
        width:0; 
        height:0; 
        border-top:10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 8px solid #8f4290;
        z-index: 100;
        position:absolute;
        left:-8px;
        top:50%;
    }
    .title_wl .kfmc{
        width: 195px;
        margin:0 auto;
        margin-top:50px;
        padding:10px 0px;
        font-size:20px;
        border:2px solid #cdcdcd;
        border-left:0px;
        border-right:0px;
        font-weight: bolder;
        display: inline-block;
    }
    .title_wr .kfmc{
        width: 195px;
        margin:0 auto;
        margin-top:50px;
        padding:10px 0px;
        font-size:20px;
        border:2px solid #cdcdcd;
        border-left:0px;
        border-right:0px;
        font-weight: bolder;
        display: inline-block;
        color: #fff;
    }
    .title_wl .kfjs{
        margin-top:30px;
        line-height: 24px;
        height: 168px
    }
    .title_wr .kfjs{
        margin-top:30px;
        line-height: 24px;
        height: 168px;
        color: #fff;
    }
    /*电脑端宾馆简介部分*/
    .brief {
        width: 150px;
        height: 56px;
        line-height: 56px;
        font-size: 24px;
        border-bottom: 1px solid #8f4290;
        border-top: 1px solid #8f4290;
        margin-top: 32px;
        display: inline-block;
    }
    .brief_content {
        padding: 30px;
    }
    .brief_content p {
        font-size: 14px;
        color: #8f4290;
        line-height: 26px;
        text-align: left;
        margin: 0;
    }
    .btn_top {
        margin-top:22px;
    }
 }
 .no_pad {
    padding: 0;
}


 @media (min-width:768px) {
     /*客房服务横线样式*/
    .kffw_left,
    .kffw_right{
        width:195px;
        height:1px;
        background: #8f4290;
        display:inline-block;
        margin-bottom: 6px;
        margin-right: 15px;
    }
    .kffw_right{
        margin-left: 15px;
    }
 }
 @media (max-width:1200px) {
    .yd_wrap {
        margin-top: 10px;
    }
    .title_wl{
        position: relative;
        height: 100%;
    }
    .title_wr{
        position: relative;
        height: 100%;
    }
    .title_wl .kfmc {
        position: absolute;
        line-height: 40px;
        top: 50%;
        margin-top: -20px;
        width: 100%;
        font-size: 18px;
    }
    .title_wr .kfmc {
        position: absolute;
        line-height: 40px;
        top: 50%;
        margin-top: -20px;
        width: 100%;
        font-size: 18px;
        color: #f8f8f8;
    }
    /*移动端宾馆简介*/

    .brief_content {
        width:100%;
        /* height: 60px; */
    }
    .brief_content p {
        font-size: 14px;
        color: #8f4290;
        line-height: 26px;
        text-align: left;
        margin: 0;
    }
 }
 @media (max-width:768px) {
    
    .kffw_left,
    .kffw_right{
        height:1px;
        background: #8f4290;
        margin-top: 9px;
    }
 }
    
.form_st{
    text-align:left;
    color:#fff
}
.form_st > input:focus{
    outline: none !important;
}
    
.kffw{
    width: 100%;
    height: 125px;
    line-height: 125px;
    margin:0 auto;
    font-size: 20px;
    font-weight:bolder;
}
  






     /* banner轮播样式 */
  .banner .banner_a {
    height: 410px;
    /* 为了让中间的内容个保留 多余的部分 被自动切割 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
  }
  .banner .banner_a.image_a {
    background-image: url('../../assets/hghotel_image/banner06.jpg');
  }
  .banner .banner_a.image_b {
    background-image: url('../../assets/hghotel_image/banner01.jpg');
  }
  .banner .banner_a.image_c {
    background-image: url('../../assets/hghotel_image/banner02.jpg');
  }
  .banner .banner_a.image_d {
    background-image: url('../../assets/hghotel_image/banner03.jpg');
  }
  .banner .banner_a.image_e {
    background-image: url('../../assets/hghotel_image/banner04.jpg');
  }
  .banner .banner_a.image_f {
    background-image: url('../../assets/hghotel_image/banner05.jpg');
  }
  /* 轮播手机样式 */
  .banner .mobile_a {
    display: block;
    width: 100%;
  }
  .banner .mobile_a img {
    display: block;
    width: 100%;
  } 
</style>
